import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import { Button, Flex } from 'antd'
import { useState } from 'react'

interface Props {
  total: number
}
const useESPage = (props: Props) => {
  const { total } = props
  const [pagination, setPagination] = useState({ current: 1, pageSize: 50 })

  const resetPage = () => {
    setPagination((prev) => {
      prev.current = 1
      prev.pageSize = 50
      return { ...prev }
    })
  }

  return {
    ESPage: (
      <Flex align="center" gap={'small'}>
        <p>
          共<span className="link-text">{total}</span>条
        </p>
        <Button
          type="link"
          disabled={pagination.current === 1}
          onClick={() => {
            setPagination((prev) => {
              prev.current--
              return { ...prev }
            })
          }}>
          <LeftOutlined />
          上一页
        </Button>
        <div>{`${(pagination.current - 1) * pagination.pageSize + 1} / ${pagination.current * pagination.pageSize}`}</div>
        <Button
          type="link"
          disabled={pagination.current * pagination.pageSize >= total}
          onClick={() => {
            if (pagination?.current * pagination.pageSize < total) {
              setPagination((prev) => {
                prev.current++
                return { ...prev }
              })
            }
          }}>
          下一页
          <RightOutlined />
        </Button>
      </Flex>
    ),
    pagination,
    resetPage
  }
}

export default useESPage
